<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base th:href="|${#request.getContextPath()}/resources/|"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="js/jquery.js" ></script>
    <script>
        function updatePasswordByNote(btn){
            //发送找回密码的邮件
            var username = $("#username").val();
            if(username != null && username.trim() != ""){
                //预处理按钮
                btnHandler(btn);
                //ajax发送到后台找到邮箱
                $.ajax({
                    url: "[[${#request.getContextPath()}]]/sso/findPasswordByNoteCode",
                    type: "POST",
                    data: {"username": username},
                    success: function(data){
                        alert(data.data.rediskey)
                        if(data.code == "0000"){
                            //发送成功
                            $("#token").val(data.data.rediskey);
                            $("#msg2").html("<font color='green'>验证码发送成功，已经发送到你的注册手机号" + data.data.phoneInfo + "</font>");
                        } else {
                            //发送失败打印错误信息
                            $("#msg2").html("<font color='red'>" + data.msg + "</font>");
                            time = 10;
                            $(btn).removeAttr("disabled");
                            $(btn).html("发送手机验证码");
                            clearTimeout(timeout);
                        }
                    },
                    dataType: "json"
                });
            } else {
                alert("用户名不能为空！");
            }
        }
        //处理按钮
        var time = 10;
        var timeout;
        function btnHandler(btn){
            if(time == 0){
                //开放按钮
                time = 10;
                $(btn).removeAttr("disabled");
                $(btn).html("发送手机验证码");
                return;
            }
            //禁用发送邮件的按钮
            $(btn).attr("disabled", "disabled");
            //修改按钮内容
            $(btn).html("手机验证码已经发送，等待(" + time + ")后重试！");
            //开始倒计时
            timeout = setTimeout(function(){
                time--;
                btnHandler(btn);
            }, 1000);
        }

    </script>
</head>
<body>
    <h1>修改密码</h1>

    <form action="/sso/toUpdatePasswordByNoteCode" method="post">
        <input id="token" type="hidden"  name="token">
        用户名：<input id="username" name="username"/><span id="msg"></span><br/>
        验证码：<input type="text" name="code" id="code">
        <button type="button" onclick="updatePasswordByNote(this);">发送短信验证</button><span id="msg2"></span><br/>
        新的密码:<input name="newpassword"/><br/>
        重复密码:<input name="ageinpassword"/><br/>
        <input type="submit" value="提交">
    </form>
</body>
</html>